<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>详情</title>
    <link rel="stylesheet" href="./css/detail-pc.css">
</head>
<body>
<div class="full">
    <div class="left">
        <div class="area sub-chart">

            <ul class="list">
                <li>总种植面积：26300亩</li>
                <li>大豆种植面积：26300亩</li>
                <li>水稻种植面积：26300亩</li>
                <li>猕猴桃种植面积：26300亩</li>
                <li>大枣种植面积：26300亩</li>
            </ul>
            <div class="raw" id="c1"></div>
        </div>
        <div class="area">
            <div class="area-title">生产指导</div>
            <div class="type-list">
                <span class="active">上一月</span>
                <span>下一月</span>
                <span>本年</span>
            </div>
            <div class="sub-chart">
                <ul class="list">
                    <li>总预警次数：1000次</li>
                    <li>一号预警次数：1000次</li>
                    <li>二号预警次数：1000次</li>
                    <li>三号预警次数：1000次</li>
                    <li>四号预警次数：1000次</li>
                    <li>五号预警次数：1000次</li>
                </ul>
                <div class="raw" id="c2"></div>
            </div>
        </div>
        <div class="area">
            <div class="area-title">生产指导</div>
            <ul>
                <li>2018年6月5日  预警 区域一高温预警</li>
                <li>2018年6月5日  预警 区域一高温预警</li>
                <li>2018年6月5日  预警 区域一高温预警</li>
                <li>2018年6月5日  预警 区域一高温预警</li>
                <li>2018年6月5日  预警 区域一高温预警</li>
                <li>2018年6月5日  预警 区域一高温预警</li>
                <li>2018年6月5日  预警 区域一高温预警</li>
                <li>2018年6月5日  预警 区域一高温预警</li>
                <li>2018年6月5日  预警 区域一高温预警</li>
                <li>2018年6月5日  预警 区域一高温预警</li>
                <li>2018年6月5日  预警 区域一高温预警</li>
            </ul>
        </div>

        <div class="area">
            <div class="area-title">未来24小时天气</div>
            <ul>
                <li>温度：20-30摄氏度</li>
                <li>风向：东南风</li>
                <li>多云有小雨</li>
            </ul>
        </div>
    </div>
    <div class="right">
        <div class="main-chart" id="mc"></div>
    </div>
</div>

<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.1.0/echarts.min.js"></script>
<script>
    $(function () {
        function makeChart(el) {
            var myChart = echarts.init(document.getElementById(el));
            var option = {
                title : false,
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend:false,
                series : [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius : '55%',
                        label:false,
                        data:[
                            {value:335, name:'直接访问'},
                            {value:310, name:'邮件营销'},
                            {value:234, name:'联盟广告'},
                            {value:135, name:'视频广告'},
                            {value:1548, name:'搜索引擎'}
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option);
        }
        makeChart('c1');
        makeChart('c2');

        $.get('./map.json',function (data) {
            echarts.registerMap('c-map', data);
            var myChart = echarts.init(document.getElementById('mc'));
            var option = {
                title : {
                    text:'环境监测',
                    textStyle:{
                        width:'100%',
                        align:'center'
                    },
                    padding:20,
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend:false,
                series : [
                    {
                        name: 'myMap',
                        type: 'map',
                        roam: true,
                        map: 'c-map'       //使用
                    }
                ]
            };
            myChart.setOption(option);
        });
        $('.type-list span').click(function () {
            $(this).addClass('active').siblings().removeClass('active');
        })
    })

</script>
</body>
</html>